<template>
  <div class="OptionTargetRoot">
    <el-form-item label="目标名称:">
      <el-input clearable v-model="TargetName"></el-input>
      <transition name="el-fade-in-linear">
        <el-text v-show="textTipMaxLengthBool" class="mx-1" size="small" type="warning">最大字符不能超过 <el-text
            type="danger">8</el-text>
          个字符</el-text>
      </transition>
    </el-form-item>

    <el-form-item label="开始时间:">
      <el-date-picker v-model="StartTime" :editable="false" type="date" :clearable="false" value-format="YYYY-MM-DD"
        end-placeholder="结束年份">
        <template #prev-year>
          <el-icon>
            <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <g stroke-width="1" fill-rule="evenodd">
                <g fill="currentColor">
                  <path
                    d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z" />
                </g>
              </g>
            </svg>
          </el-icon>
        </template>
        <template #next-year>
          <el-icon>
            <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <g stroke-width="1" fill-rule="evenodd">
                <g fill="currentColor">
                  <path
                    d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z" />
                </g>
              </g>
            </svg>
          </el-icon>
        </template>
      </el-date-picker>
      <transition name="el-fade-in-linear">
        <el-text v-show="StartTimeTip" class="mx-1" size="small" type="warning">此为必填项</el-text>
      </transition>
    </el-form-item>

    <el-form-item label="结束时间:">
      <el-date-picker v-model="EndTime" :editable="false" type="date" :clearable="false" value-format="YYYY-MM-DD"
        end-placeholder="结束年份">
        <template #prev-year>
          <el-icon>
            <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <g stroke-width="1" fill-rule="evenodd">
                <g fill="currentColor">
                  <path
                    d="M8.73171,16.7949 C9.03264,17.0795 9.50733,17.0663 9.79196,16.7654 C10.0766,16.4644 10.0634,15.9897 9.76243,15.7051 L4.52339,10.75 L17.2471,10.75 C17.6613,10.75 17.9971,10.4142 17.9971,10 C17.9971,9.58579 17.6613,9.25 17.2471,9.25 L4.52112,9.25 L9.76243,4.29275 C10.0634,4.00812 10.0766,3.53343 9.79196,3.2325 C9.50733,2.93156 9.03264,2.91834 8.73171,3.20297 L2.31449,9.27241 C2.14819,9.4297 2.04819,9.62981 2.01448,9.8386 C2.00308,9.89058 1.99707,9.94459 1.99707,10 C1.99707,10.0576 2.00356,10.1137 2.01585,10.1675 C2.05084,10.3733 2.15039,10.5702 2.31449,10.7254 L8.73171,16.7949 Z" />
                </g>
              </g>
            </svg>
          </el-icon>
        </template>
        <template #next-year>
          <el-icon>
            <svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg">
              <g stroke-width="1" fill-rule="evenodd">
                <g fill="currentColor">
                  <path
                    d="M11.2654,3.20511 C10.9644,2.92049 10.4897,2.93371 10.2051,3.23464 C9.92049,3.53558 9.93371,4.01027 10.2346,4.29489 L15.4737,9.25 L2.75,9.25 C2.33579,9.25 2,9.58579 2,10.0000012 C2,10.4142 2.33579,10.75 2.75,10.75 L15.476,10.75 L10.2346,15.7073 C9.93371,15.9919 9.92049,16.4666 10.2051,16.7675 C10.4897,17.0684 10.9644,17.0817 11.2654,16.797 L17.6826,10.7276 C17.8489,10.5703 17.9489,10.3702 17.9826,10.1614 C17.994,10.1094 18,10.0554 18,10.0000012 C18,9.94241 17.9935,9.88633 17.9812,9.83246 C17.9462,9.62667 17.8467,9.42976 17.6826,9.27455 L11.2654,3.20511 Z" />
                </g>
              </g>
            </svg>
          </el-icon>
        </template>
      </el-date-picker>
      <transition name="el-fade-in-linear">
        <el-text v-show="EndTimeTip" class="mx-1" size="small" type="warning">此为必填项</el-text>
      </transition>
      <transition name="el-fade-in-linear">
        <el-text v-show="StartTimeMinToEndTimeTip" class="mx-1" size="small" type="warning">开始时间大于了结束时间</el-text>
      </transition>
    </el-form-item>

    <el-form-item label="轮盘主题:">
      <el-select v-model="Colorvalue" style="width: 100%">
        <el-option v-for="item in Color_themes" :key="item.id" :label="item.themeName" :value="item.themeName">
          <div class="flex items-center">
            <el-tag style="margin-right: 8px" :key="index" v-for="(ColorItem, index) in item.colors"
              :color="ColorItem.color" size="small" />
          </div>
        </el-option>
        <template #label>
          <el-tag style="margin-right: 8px" v-for="Item in userSelect_color" size="small" :color="Item.color" />
        </template>
      </el-select>
    </el-form-item>
  </div>
</template>
<script setup>
import { ref, watch, reactive, onMounted } from 'vue'
const EndTime = ref('')
const StartTime = ref('')
const TargetName = ref('')
// 颜色组
let Color_themes = reactive([ //主题变量
  {
    id: 1,
    themeName: "RedBlue",
    colors: [
      { color: '#f56c6c', percentage: 20 },
      { color: '#e6a23c', percentage: 40 },
      { color: '#5cb87a', percentage: 60 },
      { color: '#1989fa', percentage: 80 },
      { color: '#6f7ad3', percentage: 100 },
    ]
  },
  {
    id: 2,
    themeName: "BlueRed",
    colors: [
      { color: '#6f7ad3', percentage: 20 },
      { color: '#1989fa', percentage: 40 },
      { color: '#5cb87a', percentage: 60 },
      { color: '#e6a23c', percentage: 80 },
      { color: '#f56c6c', percentage: 100 },
    ]
  },
])
const Colorvalue = ref('')  //选择的颜色组,这里不是默认值
let userSelect_color = ref([]) // 不要动这个不是默认值
let ColorList = []
watch(Colorvalue, (newValue) => {
  for (let i = 0; i < Color_themes.length; ++i) {
    if (Color_themes[i].themeName == newValue) {
      ColorList = Color_themes[i].colors;
      userSelect_color.value = []
      for (let i = 0; i < ColorList.length; i++) {
        userSelect_color.value.push(ColorList[i])
      }
    }
  }
})
Colorvalue.value = "RedBlue"; //这里是默认值需要和主题变量的名称对应

// 名称
let textTipMaxLength = 8; // 不可以超过的字符
let textTipMaxLengthBool = ref(false)
// 目标名称的检查
watch(TargetName, (newValue) => {
  if (newValue.length > textTipMaxLength) {
    textTipMaxLengthBool.value = true
  } else {
    textTipMaxLengthBool.value = false
  }
})

// 日期
let StartTimeMinToEndTimeTip = ref(false)
function StartTimeMinANDEndTime() {
  let StartTimeNum = new Date(StartTime.value).getTime();
  let EndTimeNum = new Date(EndTime.value).getTime();
  if (EndTime.value == '') {
    StartTimeMinToEndTimeTip.value = false;
    return false
  }
  if(StartTime.value == ''){
    StartTimeMinToEndTimeTip.value = false;
    return false
  }
  let allTime = (EndTimeNum - StartTimeNum);  
  if (allTime > 0) {
    StartTimeMinToEndTimeTip.value = false;
  } else {
    StartTimeMinToEndTimeTip.value = true;
  }
}
let EndTimeTip = ref(true);
watch(EndTime, () => {
  StartTimeMinANDEndTime()
  EndTimeTip.value = false;
})

let StartTimeTip = ref(false);  //开始时间有默认值，所以不可能为空
watch(StartTime, () => {
  StartTimeMinANDEndTime()
})

const {target_name} = defineProps({
  target_name:{ //外部传过来的
    default:""
  }
})

TargetName.value = target_name;

onMounted(() => {
  let now = new Date();
  StartTime.value = now.toISOString().slice(0, 10);

})

defineExpose({
  TargetName,
  userSelect_color,
  EndTime,
  textTipMaxLength,
  StartTime,
  StartTimeMinToEndTimeTip
})

</script>

<style lang="less" scoped>
.OptionTargetRoot {
  padding: 0px 4%;
}

.el-tag {
  border: none;
  aspect-ratio: 1;
}
</style>